<!-- 广告位管理 -->
<template>
  <div>
    <div class="cardBody">
      <edu-table
        ref="mainTable"
        :data="tableList"
        :order="true"
        :selection="false"
        :pagination="false"
      >
        <el-table-column label="标题" prop="title" />
        <el-table-column label="宽" prop="width" />
        <el-table-column label="高" prop="height" />
        <el-table-column label="操作" fixed="right" width="220px">
          <template slot-scope="scope">
            <el-button type="text" @click="edit(scope.row)" size="small">
              编辑
            </el-button>
            <el-button type="text" @click="addAdv(scope.row)" size="small"
              >添加广告</el-button
            >
          </template>
        </el-table-column>
      </edu-table>
    </div>

    <edu-dialog
      :title.sync="dialogConfig.title"
      :visible.sync="dialogConfig.showDialog"
      @close="closeDialog(dialogConfig)"
      width="650px"
    >
      <el-form
        ref="dialogForm"
        :model="dialogConfig.formData"
        :rules="dialogConfig.action === 'view' ? {} : dialogConfig.rules"
        label-width="120px"
        size="small"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="标题" prop="title">
              <el-input
                v-model="dialogConfig.formData.title"
                disabled
                clearable
                style="width: 350px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="宽（像素）" prop="width">
              <el-input-number
                v-model="dialogConfig.formData.width"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="高（像素）" prop="height">
              <el-input-number
                v-model="dialogConfig.formData.height"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="buttons" v-if="dialogConfig.action !== 'view'">
        <template>
          <el-button @click="closeDialog(dialogConfig)"> 取消 </el-button>
          <el-button type="primary" @click="handlerSubmit"> 提交 </el-button>
        </template>
      </span>
      <span slot="buttons" v-else>
        <template>
          <el-button @click="closeDialog(dialogConfig)">返回</el-button>
        </template>
      </span>
    </edu-dialog>

    <!-- 广告管理 -->
    <Advs ref="advs" />
  </div>
</template>

<script>
import utils from "@/utils";
import mixins from "@/mixins";

import Advs from "./components/Advs";

import { queryAdAreaList, updateAdArea } from "@/api/advertisement";

export default {
  mixins: [mixins],
  components: {
    Advs,
  },
  data() {
    return {
      tableList: [],
      dialogConfig: {
        title: "",
        showDialog: false,
        action: "add",
        formData: {},
        rules: {},
        fileList: [],
      },
      options: {
        recommend: [
          {
            name: "推荐",
            code: 1,
          },
          {
            name: "不推荐",
            code: 2,
          },
        ],
        publishStatus: [
          {
            name: "发布",
            code: 1,
          },
          {
            name: "不发布",
            code: 2,
          },
        ],
      },
    };
  },
  created() {
    this.initOptions();
  },
  methods: {
    async initOptions() {
      // 查询列表
      this.query();
    },
    // 查询
    async query() {
      let { returnObj } = await queryAdAreaList();
      this.tableList = returnObj;
    },
    // 修改
    async edit(row) {
      this.dialogConfig.title = "编辑";
      this.dialogConfig.action = "edit";

      this.dialogConfig.formData = utils.clone(row);

      this.openDialog(this.dialogConfig);
    },
    // 编辑提交
    handlerSubmit() {
      let params = {
        ...this.dialogConfig.formData,
      };
      this.$refs["dialogForm"].validate((valid) => {
        if (valid) {
          updateAdArea(params).then((res) => {
            this.$message({
              type: "success",
              message: "成功",
            });
            this.closeDialog(this.dialogConfig);
            this.query();
          });
        }
      });
    },
    closeDialog(dialog) {
      dialog.showDialog = false;
      this.$refs["dialogForm"].resetFields();
    },
    openDialog(dialog) {
      dialog.showDialog = true;
    },
    // 查看
    view() {
      this.dialogConfig.title = "查看";
      this.dialogConfig.action = "view";
      this.openDialog(this.dialogConfig);
    },

    // 新增广告
    async addAdv(row) {
      this.$refs.advs.open(row);
    },
  },
};
</script>

<style lang="scss" scoped></style>
